import { Button, Form, Input, Radio, Select } from 'antd';
import React, { useState } from 'react'


type formConfigItem = {
  type: string,
  label: string,
  fieldName: string,
  placeholder: string
  rules?: any[]
  child?: any[] // 下拉框
}

interface GeneralFormType {
  formData?: any
  formDataConfig?: formConfigItem[]
}


const GeneralForm: React.FC<GeneralFormType> = (props) => {
  const [form] = Form.useForm();
  return (
    <Form
      name="dynamic_form_nest_item"
      style={{ maxWidth: 600 }}
      autoComplete="off"
      form={form}
      initialValues={props.formData}
    >
      {
        props.formDataConfig?.map(config => {
          if (config.type === 'input') {
            return <Form.Item label={config.label} name={config.fieldName} >
              <Input placeholder={config.placeholder} />
            </Form.Item>
          }

          if (config.type === 'select') {
            return <Form.Item label={config.label} name={config.fieldName} >
              <Select >
                {
                  config.child.map(c => {
                    return <Select.Option value={c.value} key={c.value}>{c.label}</Select.Option>
                  })
                }
              </Select>
            </Form.Item>
          }
        })
      }

      <Button type="primary" onClick={() => console.log(form.getFieldsValue())}>添加</Button>


    </Form>
  )
}

export default GeneralForm